<template>
  <div style="height: 100vh;">
    <el-row :gutter="12" style="height: 400px;margin-bottom:40px">
      <el-col :span="12" style="height: 100%;">
        <el-card shadow="hover" style="height: 100%;" id="chart1"></el-card>
      </el-col>
      <el-col :span="12" style="height: 100%;">
        <el-card shadow="hover" style="height: 100%;" id="chart2"></el-card>
      </el-col>
    </el-row>
    <el-row :gutter="12" style="height: 400px;margin-bottom:20px">
      <el-col :span="12" style="height: 100%;">
        <el-card shadow="hover" style="height: 100%;" id="chart3"></el-card>
      </el-col>
      <el-col :span="12" style="height: 100%;">
        <el-card shadow="hover" style="height: 100%;">
          <el-select v-model="value" placeholder="请选择您的操作：" @change="selectOption">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-table v-if="objects.length" :data="objects" class="tableBox" stripe>
            <el-table-column prop="name" :label="value==='1'?'项目经理':'项目'"></el-table-column>
            <el-table-column prop="pot" :label="value==='1'?'管理项目':'管理任务'"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { selectJobAndCount } from "@/api/login-register";
import { selectStatus } from "@/api/project";
import { selectStatusOfTasks } from "@/api/task";
import { selectUserOfProject,selectProjectOfTask } from "@/api/common";
export default {
  name: "home",
  data() {
    return {
      job: [],
      project: [],
      taskData: [],
      options: [
        {
          value: "1",
          label: "查询项目经理所分配的项目"
        },
        {
          value: "2",
          label: "查询项目中的任务"
        }
      ],
      value: null,
      objects: []
    };
  },
  created() {
    this.selectJobAndCount();
    this.selectStatusAndCount();
    this.selectStatusOfTask();
  },
  mounted() {},
  methods: {
    selectOption() {
      if (this.value === "1") {
        // 查询项目经理所分配的项目
        selectUserOfProject().then(
          res => {
            if (res.data.code === 200) {
              this.objects = res.data.data;
            }
          },
          err => {
            alert(err.$message);
          }
        );
      } else if (this.value === "2") {
        // 查询项目中的任务
        selectProjectOfTask().then(
          res => {
            if (res.data.code === 200) {
              this.objects = res.data.data;
            }
          },
          err => {
            alert(err.$message);
          }
        );
      }
    },
    showChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById("chart1"));
      var myChart2 = echarts.init(document.getElementById("chart2"));
      var myChart3 = echarts.init(document.getElementById("chart3"));
      // 绘制图表
      myChart1.setOption({
        title: {
          text: "职位分配图",
          left: "center",
          top: "center"
        },
        series: [
          {
            type: "pie",
            data: this.job,
            radius: ["40%", "70%"]
          }
        ]
      });

      myChart2.setOption({
        title: {
          text: "项目状态完成情况",
          left: "center",
          top: "top"
        },
        legend: {
          orient: "vertical",
          x: "left",
          data: ["未开启", "推进中", "已完成", "超时项目"]
        },
        series: [
          {
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center"
            },
            labelLine: {
              show: false
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold"
              }
            },
            data: this.project
          }
        ]
      });

      myChart3.setOption({
        title: {
          text: "任务完成情况",
          left: "left",
          top: "left"
        },
        series: [
          {
            type: "pie",
            data: this.taskData,
            roseType: "area"
          }
        ]
      });
    },
    // 显示职位分配
    selectJobAndCount() {
      selectJobAndCount()
        .then(
          res => {
            if (res.data.code === 200) {
              this.job = res.data.data;
              this.showChart();
            }
          },
          err => {
            alert(err.message);
          }
        )
        .catch(function(error) {
          // 处理错误情况
          alert(error.message);
        });
    },
    // 显示项目状态
    selectStatusAndCount() {
      selectStatus()
        .then(
          res => {
            if (res.data.code === 200) {
              this.project = res.data.data;
              this.showChart();
            }
          },
          err => {
            alert(err.message);
          }
        )
        .catch(function(error) {
          // 处理错误情况
          alert(error.message);
        });
    },

    // 显示任务状态
    selectStatusOfTask() {
      selectStatusOfTasks()
        .then(
          res => {
            if (res.data.code === 200) {
              this.taskData = res.data.data;
              this.showChart();
            }
          },
          err => {
            alert(err.message);
          }
        )
        .catch(function(error) {
          // 处理错误情况
          alert(error.message);
        });
    }
  }
};
</script>

<style>
</style>